"use client"
import React from 'react'
import Image from 'next/image'
import { useRouter } from 'next/navigation'
import { products } from '@/data'
export default function Page({ params }: { params: { id: string }}) {
  const id = Number(params.id)
  const product = products.find(item => item.id === id )!
  const router = useRouter()
  return (
    <div className="flex justify-center items-center fixed inset-0 bg-gray-500/60" onClick={router.back}>
      <Image src={product.imageSrc} alt={product.imageAlt} width={300} height={300} className="rounded-lg" onClick={e => e.stopPropagation()}/>
    </div>
  )
}
